<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>应用市场</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        .bgColor{
            background: #F2F6FC;
            overflow-x: hidden;
        }
        .appMarketTong{
            width: 100%;
            float: left;
        }
        .appMarketH{
           height: 50px;
           margin: 10px;
        }
        .appMarketH .leftTitle{
            float: left;
            font-size: 20px;
            font-weight: bold;
            line-height: 40px;
            padding-left: 1%;
        }
        .appMarketH .rightSearch{
            float: right;
            margin-right: 20px;
        }
        .appMarketBanner{
            height: 50px;
            background: #f8f8f8;
            border-top: #DCDFE6 1px solid;
            border-bottom: #DCDFE6 1px solid;
        }
        .appMarketBanner ul{
            list-style: none;
        }
        .appMarketBanner li{
            float: left;
            width: 100px;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
            margin-left: 2%;
            color: #909399;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 1px;
        }
        .appMarketBanner li:hover{
            float: left;
            width: 100px;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
            margin-left: 2%;
            background: #E4E7ED;
        }
        .appMarketTitle{
            height: 50px;
            line-height: 50px;
            margin-left: 2%;
            font-size: 15px;
            color: #909399;
            font-weight: bold;
        }
        .appMarketList{
            height: auto;
            overflow: hidden;
        }
        .appMarketList ul{
            list-style: none;
            background: #fff;
            width: 96%;
            height: 100%;
            border: 1px solid #DCDFE6;
            margin: 5px auto;
        }
        .appMarketList li{
            width: 94%;
            height: 120px;
            border: 1px solid #DCDFE6;
            margin: 3%;
        }
        .appMarketList li .leftImage{
            width: 120px;
            height: 120px;
            background: #409EFF;
            float: left;
            color: #fff;
            text-align: center;
        }
        .appMarketList li .leftImage img{
            margin-top: 28%;
            width: 40px;
            height: 40px;
        }
        .appMarketList li .leftImage p{
            font-size: 14px;
        }
        .appMarketList li .middleDes{
            width: 350px;
            height: 120px;
            float: left;
            margin-left: 6%;
            line-height: 20px;
            font-size: 12px;
            color: #909399;
        }
        .appMarketList li .middleDes p{
            margin-top: 10px;
        }
        .appMarketList li .middleDes .middleDesIconSelete{
            margin-top: 5%;
        }
        .appMarketList li .rightButton{
            width: 100px;
            height: 50px;
            line-height: 50px;
            float: right;
            margin-top: 4%;
            margin-right: 2%;
            background: #67C23A;
            color: #fff;
            border: 0;
            font-size: 16px;
        }
    </style>
    <script src="javascript/api.js"></script> <!-- api.js必须放到最开头 -->
    <script src="javascript/axios.js"></script>
    <script src="javascript/vue.js"></script>
    <!-- <script src="http://www.jianvary.com/jquery.js"></script> -->
</head>
<body class="bgColor">
    <div id="app">
        <div class="appMarketH appMarketTong">
            <div class="leftTitle">
                支撑平台应用商店
            </div>
            <div class="rightSearch">
                <!-- 搜索框 需要再完善 -->
            </div>
        </div>
        <div class="appMarketBanner appMarketTong">
            <ul>
                <li v-for="(item,index) in title" @click="changeCont(index)"> {{item.className}}</li>
            </ul>
        </div>
        <div class="appMarketTitle appMarketTong">
            <span>{{titleShow}}</span>
        </div>
        <div class="appMarketList appMarketTong" id="appContent">
            <ul>

                <li v-for="(item,index) in listDown" >
                    <form>
                    <div class="leftImage">
                        <img v-bind:src="item.logo" />
                        <p>{{item.name}}</p>
                    </div>
                    <div class="middleDes">
                        <p>{{item.name}}</p>
                        <p>应用描述字段，说明应用的使用</p>
                        <p class="middleDesIconSelete">
                            图标:
                            大<input type="radio" value="0" name="icon"  @change="changeRadio(0)"/>
                            中<input type="radio" value="1" name="icon"  @change="changeRadio(1)"/>
                            小<input  type="radio" value="2"  name="icon" checked="true" @change="changeRadio(2)"/>
                        </p>
                    </div>
                    <button class="rightButton" @click="installCont(index,item)" :install="item.isInstall" >安装</button>
                    </form>
                </li>

            </ul>
        </div>
    </div>
    <script>
        //测试子窗口控制父窗口的跳转
        // parent.window.location = 'http://127.0.0.1/webos1/login.html';
        var accessToken = localStorage.token;
        function dumpUrl() {
               return parent.window.location.href = 'http://193.112.49.253:15680/webos99/index.html';
        }
        new Vue({
            el: '#app',
            data: {
                title: [],              //分类列表名
                titleShow: '',          //列表导航名字
                list: '',               //列表类
                appType: 1,             //读取类型列表
                listDown: '',           //列表安装
                radioParam: 2,        //图标大中小，默认小选择2
                appCode: '',
            },
            methods: {
            	changeRadio(val){
            		this.radioParam = val;
            	},
                changeCont: function(index){ //种类选择，以及渲演对应的列表。
                    var _this = this;
                    var ul = document.getElementById('appContent');
                    var li = ul.getElementsByTagName('li');
                    this.appType = this.title[index].classCode;
                    this.titleShow = this.title[index].className;
                    axios.post(zuulHost+'/m_manage/userAppMenu/getAppByUser?access_token='+accessToken,{
                    "appType": this.title[index].classCode
                    })
                    .then(function(res){
                        console.log(res.data.data);
                        _this.listDown = res.data.data;
                        setTimeout(function(){
                            let rightButton = document.getElementsByClassName("rightButton");
                            for(let i = 0; i<rightButton.length; i++){
                                console.log(rightButton[i].getAttribute('install'));
                                if(rightButton[i].getAttribute('install') == 1){
                                    rightButton[i].style.background = '#E4E7ED';
                                    rightButton[i].disabled = true;
                                }else{
                                    rightButton[i].style.background = '#67C23A';
                                    rightButton[i].disabled = false;
                                }
                            }
                        },1500);
                    })
                    .catch(function(err){
                    console.log(err);
                    dumpUrl();
                    });
                },
                installCont: function(index,item){
                    //这里存一些属性给到数据库，安装APP应用或者是增加
                    //这里还要判断已经是安装过的，就提示不用再次安装，这里应该存一个属性添加了为1，删除，或者没添加为0;
                    //同步添加一下要添加的APP-json数据，jquery ajax;
                    var appCode =item.appCode,id = item.appCode, title = item.name, webSrc = item.url, src = item.logo;
                    var json = [{id: id, pos: 'jiu' , title: title, src: src, webSrc: webSrc,iWidth:1100,iHeight:500,iLeft:110}];
                    console.log(this.listDown[index].isInstall);
                    console.log(webSrc);
                    let _this = this;
                    if(this.listDown[index].isInstall===0){
                        var region = parent.newDeskBox.createNewApp2(json[0]);   //本地自己添加应用,return 出一个区域
                        parent.newDeskBox.events();         //本地自己添加事件
                        console.log(region);
                        //桌面端加样式，每个App的底色都要不同相邻的两个。通过DOM来操控它们之间的div底色。
                        // setTimeout(function(){
                            var desk1 = parent.document.getElementById('desk1'),
                                desk2 = parent.document.getElementById('desk2'),
                                desk3 = parent.document.getElementById('desk3'),
                                desk4 = parent.document.getElementById('desk4'),
                                desk5 = parent.document.getElementById('desk5'),
                                desk6 = parent.document.getElementById('desk6');

                            try{
                                desk1.firstChild.style.background = '#efb336';
                                desk1.children[1].style.background = '#1f53a0';
                                desk1.children[2].style.background = '#807f7f';
                                desk1.children[3].style.background = '#b00f0f';
                                desk1.children[4].style.background = '#a87c2c';
                                desk1.children[5].style.background = '#0057bd';


                            }catch(err){

                        }
                        try{
                                desk2.firstChild.style.background = '#807f7f';
                                desk2.children[1].style.background = '#efb336';
                                desk2.children[2].style.background = '#1f53a0';
                                desk2.children[3].style.background = '#b00f0f';
                                desk2.children[4].style.background = '#a87c2c';
                                desk2.children[5].style.background = '#0057bd';
                        }catch(err){

                        }
                        try{
                                desk3.firstChild.style.background = '#efb336';
                                desk3.children[1].style.background = '#1f53a0';
                                desk3.children[2].style.background = '#807f7f';
                                desk3.children[3].style.background = '#b00f0f';
                                desk3.children[4].style.background = '#a87c2c';
                                desk3.children[5].style.background = '#0057bd';

                                desk4.firstChild.style.background = '#efb336';
                                desk4.children[1].style.background = '#1f53a0';
                                desk4.children[2].style.background = '#807f7f';
                                desk4.children[3].style.background = '#b00f0f';
                                desk4.children[4].style.background = '#a87c2c';
                                desk4.children[5].style.background = '#0057bd';

                                desk5.firstChild.style.background = '#efb336';
                                desk5.children[1].style.background = '#1f53a0';
                                desk5.children[2].style.background = '#807f7f';
                                desk5.children[3].style.background = '#b00f0f';
                                desk5.children[4].style.background = '#a87c2c';
                                desk5.children[5].style.background = '#0057bd';

                                desk6.firstChild.style.background = '#807f7f';
                                desk6.children[1].style.background = '#efb336';
                                desk6.children[2].style.background = '#1f53a0';
                                desk6.children[3].style.background = '#b00f0f';
                                desk6.children[4].style.background = '#a87c2c';
                                desk6.children[5].style.background = '#0057bd';
                            }catch(err){

                        }

                        axios.post(zuulHost+'/m_manage/userAppMenu/create?access_token='+accessToken,{
                            "appCode": appCode,
                            "pos": 'jiu',
                            "title": title,
                            "src": src,
                            "webSrc": webSrc,
                            "iwidth": 1500,
                            "iheight": 500,
                            "ileft": 110,
                            "region": region,
                            "pictureSize": _this.radioParam,
                            "desktop": 1,
                            })
                            .then(function(res){
                                console.log(res);

                            })
                            .catch(function(err){
                            console.log(err);
                            dumpUrl();
                        });
                        alert('添加应用成功');
                        return false;
                        //添加应用后，应该把this.listDown[index].isInstall是否安装过的值改一下。后台处理已处理
                    }else{
                        alert('您好！应用已经安装过！请到桌面使用。');
                        return false;
                    }
                },
            },
            created: function(){
                var _this = this;
                axios.post(zuulHost+'/m_dataBase/applicationType/condition?access_token='+accessToken,{
                    "pageNum": 1,
                    "pageSize": 20
                    })
                    .then(function(res){
                        console.log(res.data.data.list);
                        _this.title = res.data.data.list;
                        _this.titleShow = _this.title[0].className; //初始化应用分类名字
                    })
                    .catch(function(err){
                    console.log(err);
                    dumpUrl();
                });
                var reqParamuilder = {url:zuulHost+'/m_manage/userAppMenu/getAppByUser'+"?access_token="+localStorage.token
                        ,method:'post'
                        ,data:{"appType": 1}
                        ,headers: {'token':localStorage.token}}
                axios(reqParamuilder)
                    .then(function(res){
                        console.log(res.data.data);
                        _this.listDown = res.data.data;
                    })
                    .catch(function(err){
                    console.log(err);
                    dumpUrl();
                });
                //判断安装按钮，如果已经安装了，这个按钮不能再点击，如果删除了这个应用，又可以再次恢复点击功能，disabled="disabled"
                var jiankk = setTimeout(function(){
                        var rightButton = document.getElementsByClassName("rightButton");
                        for(var i = 0; i<rightButton.length; i++){
                            console.log(rightButton[i].getAttribute('install'));
                            if(rightButton[i].getAttribute('install') == 1){
                                rightButton[i].style.background = '#E4E7ED';
                                rightButton[i].disabled = true;
                            }else{
                                rightButton[i].style.background = '#67C23A';
                                rightButton[i].disabled = false;
                            }
                        }
                    },1500);
                }
        });

    </script>
</body>
</html>
